<template>
	<div class="list">
		<!-- :label-col="{span: 5}"-->
		<a-form ref="searchFormRef" class="search-form base-mb15" :model="searchFormState"
			:label-col="{ style: { minWidth: '100px'}}" @finish="onSearchFinish">
			<a-row :gutter="[10, 24]" class="base-mt20">
				<a-col :md="6" :lg="8" :xl="6">
					<a-form-item name="orgId" :label="$t('self.userCharge.tips9')">
						<a-select v-model:value="searchFormState.orgId" :options="searchOrgOptions"
							:fieldNames="{label: 'orgName',value: 'id'}" :placeholder="$t('self.pleaseChoose')" />
					</a-form-item>
				</a-col>
				<a-col :md="6" :lg="8" :xl="6">
					<a-form-item name="startTime" :label="$t('self.userCharge.tips10')">
						<a-date-picker v-model:value="searchFormState.startTime" style="width: 100%;" />
					</a-form-item>
				</a-col>

				<a-col :md="6" :lg="8" :xl="6">
					<a-form-item name="endTime" :label="$t('self.userCharge.tips11')"
						:label-col="{ style: { width: '100px' } }">
						<a-date-picker v-model:value="searchFormState.endTime" style="width: 100%;" />
					</a-form-item>
				</a-col>

				<a-col :md="6" :lg="8" :xl="6" class="base-flex base-rows">
					<a-button type="primary" html-type="submit">{{ $t('self.searchButton') }}</a-button>
					<a-button class="base-ml10" @click="resetSearchForm">{{ $t('self.resetButton') }}</a-button>
				</a-col>
			</a-row>

		</a-form>

		<s-table ref="stableRef" :api-obj="tableConfig.apiObj" api-method="POST" :columns="sourceColumn" row-key="id"
			:light-index="tableConfig.lightIndex" :is-row-selection="false" @selectionChange="tableSelectionChange"
			:is-show-tool="false" :scroll="{ x: 1400 }">
		</s-table>

	</div>
</template>

<script setup>
	import {
		getCurrentInstance,
		nextTick,
		onMounted,
		ref,
		watch
	} from 'vue'
	import {
		useRoute,
		useRouter
	} from 'vue-router'
	import ScStatusIndicator from '@/components/scMini/scStatusIndicator.vue'
	import {
		mainStore
	} from '@/stores/mainStore'
	import dayjs from 'dayjs'

	const {
		proxy
	} = getCurrentInstance()
	const $TOOL = proxy.$TOOL
	const $API = proxy.$API
	const $T = proxy.$t
	const route = useRoute()
	const router = useRouter()
	const useMainStore = mainStore()

	const selectedKey = ref([])
	const stableRef = ref(null)
	const dateMode = ref('month') 
	const tableConfig = ref({
		apiObj: $API.backend.report.accountChargeReport,
		loading: true,
		lightIndex: []
	})
	const sourceColumn = ref([])
	const tableData = ref([])
	onMounted(async () => {
		resetDefaultOptionsByLang()
		// getAccountChargeReport()
		searchOrgOptions.value = await proxy.getOrgSelectList(true)
	})
	//{\"size\":\"10\",\"pageNo\":\"1\",\"orgId\":\"101\",
	//\"startTime\":\"2025-01-01\",
	//\"endTime\":\"2025-07-02\",\"type\":\"1\"}",
	const getAccountChargeReport = async (params = {}) => {
		const clean = {
			orgId: params.orgId || undefined,
			stationId: params.stationId || undefined,
			pileSeri: params.pileSeri || undefined,
			startTime: params.startTime || undefined,
			endTime: params.endTime || undefined,
			type: params.type ?? -2,
			pageNo: params.pageNo ?? 1,
			pageSize: params.pageSize ?? 10,
		}
		try {
			const res = await $API.backend.report.accountChargeReport.post(clean)
			if (!res.data || res.data.length === 0) {
				tableData.value = [];
				return;
			}
			console.log("res.data=====",res.data)
			tableData.value = res.data
		} catch (error) {
			// const res = await $API.backend.report.accountChargeReport.post(clean)
			if (!error.data || error.data.length === 0) {
				tableData.value = [];
				return;
			}
			tableData.value = error.data
			console.error("接口异常：", error)
			message.error(err.msg);
		}
	}


	watch(
		() => useMainStore.lang,
		(curr, old) => {
			resetDefaultOptionsByLang()
		}
	)

	const resetDefaultOptionsByLang = () => {
		sourceColumn.value = [{
				title: $T('self.operators.tips1'),
				dataIndex: 'orgName',
				key: 'orgName'
			},
			// {
			// 	title: $T('self.businessStation.tips1'),
			// 	dataIndex: 'stationName',
			// 	key: 'stationName'
			// },
			{
				title: 'Total Charge Num',
				dataIndex: 'totalChargeNum',
				key: 'totalChargeNum'
			},
			{
				title: $T('self.userCharge.tips5'),
				dataIndex: 'totalAmount',
				key: 'totalAmount'
			},
			{
				title: $T('self.createTimeTxt'),
				dataIndex: 'createTime',
				key: 'createTime'
			},
		]
	}

	const tableSelectionChange = (rows, record) => {
		selectedKey.value = rows
	}


	const searchFormRef = ref(null)
	const searchFormState = ref({
		orgId: '',
		startTime: null,
		endTime: null,
		pageNo: 1,
		pageSize: 10,
	})
	const searchOrgOptions = ref([])
	const onSearchFinish = (_values) => {
		
		const fmt = dateMode.value === 'month' ? 'YYYY-MM' : 'YYYY-MM-DD'
		const clean = {
			orgId: searchFormState.value.orgId || '',
			startTime: searchFormState.value.startTime ?
				dayjs(searchFormState.value.startTime).format(fmt) :
				'',
			endTime: searchFormState.value.endTime ?
				dayjs(searchFormState.value.endTime).format(fmt) :
				'',
			pageNo: 1,
			pageSize: 10
		}
		// searchOrgOptions.value = await proxy.report.accountChargeReport(clean)
		getAccountChargeReport(clean)
	}
	// 重置搜索表单
	const resetSearchForm = () => {
		searchFormRef.value.resetFields()
		searchFormState.value.pageNo = 1
		searchFormState.value.pageSize = 10
		apiParams.value = {
			orgId: '',
			startTime: dayjs().subtract(1, 'month').format(defaultFmt),
			endTime: dayjs().format(defaultFmt),
			type: -2,
			pageNo: 1,
			pageSize: 10,
		}
	}
</script>

<style lang="scss" scoped>
	.list {
		height: 100%;
		background: #ffffff;
		padding: 15px;

		.search-form {
			padding: 16px;
			background: rgb(247, 248, 250);

			:deep(.ant-form-item) {
				margin-bottom: 0;
			}
		}
	}
</style>